<?php

error_reporting(0);

//redirect for mobile (excl. tablets)
include 'includes/Mobile_Detect.php';
$detect = new Mobile_Detect;
if( $detect->isMobile() && !$detect->isTablet() ){
    Header("Location: http://phone.forafreeworld.com/");
    exit;
}

Header("Cache-Control: public, max-age=2592000");
Header("Content-Type: text/html; charset=utf-8");
mb_internal_encoding("UTF-8");


$message = array();
$mailed = false;
$budget_checked = false;
$project_type_checked = false;

if($_POST) {

    //USER INPUT NORMALIZATION
    if(isset($_POST['name_detail'])) {
        $name = htmlspecialchars(trim($_POST['name_detail']));
        $email = htmlspecialchars(trim($_POST['email_detail']));
        $phone = htmlspecialchars(trim($_POST['phone_detail']));
        $company = htmlspecialchars(trim($_POST['company_detail']));
        $budget = $_POST['budget'];
        $project_type = $_POST['project_type'];
        $question = htmlspecialchars($_POST['question_detail']);

        $detail = true;
    }

    if(isset($_POST['name_short'])) {
        $name = htmlspecialchars(trim($_POST['name_short']));
        $email = htmlspecialchars(trim($_POST['email_short']));
        $question = htmlspecialchars($_POST['question_short']);
        $phone = "";
        $company = "";
        $budget = "";
        $project_type = "";
    }

    //USER INPUT VALIDATION
    if(mb_strlen($name) < 3) {
        $message[] = "The name should be longer than 2 characters.";
    }

    if(!filter_var($email, FILTER_VALIDATE_EMAIL)) {
        $message[] = "Please enter a valid email address.";
    }

    if(isset($detail) && (int)mb_strlen($phone) < 7) {
        $message[] = "Please enter a valid phone number, including location dialing prefixes.";
    }

    if(mb_strlen($question) < 20) {
        $message[] = "Please enter 20 characters or more for your enquiry.";
    }

    //send email if no input validation successful
    if(count($message) == 0) {
        $mail_msg = "<html><head></head><body>
            Customer name: ".$name."<br/>".
            "Customer email: ".$email."<br/>".
            "Customer phone number: ".$phone."<br/>".
            "Company name: ".$company."<br/>".
            "Selected budget: ".$budget."<br/>".
            "Selected project_type: ".$project_type."<br/>".
            "Enquiry: ".$question."<br/></body></html>";
        $mail_msg = wordwrap($mail_msg, 70, "\r\n");

        $mailed = @mail('az3@abv.bg', 'forafreeworld.com Customer Enquiry',
            $mail_msg, 'Content-type: text/html; charset=utf-8' . "\r\n");

        if($mailed) {
            $message[] = "The enquiry has been sent successfully, we will get in touch with you as soon as possible.";
        } else {
            $message[] = "An error occurred while sending the message. Please try again later.";
        }
    }
}
?>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <meta name="author" content="Extraordinary web design"/>
    <meta name="description" content="Be Free Web Design Studio is a small team which specializes in providing full-scope web services to clients around the Free World of Earth. We are based in Sofia, Bulgaria (Southeastern Europe). Currently the Team consists of Nikolay Ivanov - Web Designer, and Denislav Dimitrov - Web Developer. Some of the services we provide are: Website creation, website updates, redesign, creative design, logo and banner design, security updates, Wordpress site management, database optimization and maintenance, server-side web services."/>
    <meta name="Keywords" content="web design, web development, website, wordpress site, responsive design,
        custom website, web content management, уеб дизайн, уебсайт, интернет страница"/>
    <meta name="googlebot" content="all"/>
    <link href="img/favicon.ico" rel="shortcut icon"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web Design For A Free World</title>

    <!--[if lte IE 9]>
    <script src="shivs/html5shiv/html5shiv.js"></script>
    <![endif]-->
    <!--[if IE 7 ]>    <html class="ie7"> <![endif]-->
    <!--[if IE 8 ]>    <html class="ie8"> <![endif]-->
    <!--[if IE 9 ]>    <html class="ie9"> <![endif]-->
    <!--[if IE ]>    <html class="ie"> <![endif]-->

    <link rel="stylesheet" type="text/css" href="css/style.css"/>
    <link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"/>

    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    <script src="js/jquery.placeholder.js"></script>
    <script src="js/main.js"></script>
    <script src="js/side-nav.js"></script>
    <script src="js/backgrounds.js"></script>
    <script src="js/kinetics.js"></script>
    <script src="js/parallax.js"></script>

    <script type="text/javascript">
        var _gaq = _gaq || [];
        _gaq.push(['_setAccount', 'UA-45637344-4']);
        _gaq.push(['_trackPageview']);

        (function() {
            var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
            ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
            var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
        })();
    </script>

</head>
<body>
<div id="mock-scroller">
</div>
<ul id="nav">
</ul>
<!-- WEB CONTENT -->
<div id="content">
<section id="section-Home">
    <img class="bg animate" src="img/bg.jpg" anim-detached="true"/>
    <header id="container_header">
        <div id="header_holder">
            <div id="copyright">
                <p>
                    Copyright &copy; Forafreeworld.com
                </p>
            </div>
            <div id="social_lang_holder">
                <div id="social">
                    <ul>
                        <li><a href="https://www.facebook.com/pages/Be-Free-Web-Design-Studio/561352003933342" target="_blank"><img src="img/facebook.png" alt=""></a></li>
                        <li><a href="https://twitter.com/be_free_studio" target="_blank"><img src="img/twitter.png" alt=""></a></li>
                        <li><a href="https://plus.google.com/communities/115431413168700794942" target="_blank"><img src="img/google.png" alt=""></a></li>
                    </ul>
                </div>
                <div id="lang">
                    <ul>
                        <li><a href="http://forafreeworld.com/">en</a></li>
                        <li><a href="http://forafreeworld.com/de/">de</a></li>
                        <li><a href="http://forafreeworld.com/bg/"><span id="separate_it">bg</span></a></li>

                    </ul>
                </div>
                <div id="logo">
                    <img src="img/logo.png" alt="">
                </div>
            </div>
        </div>
        <div id="second_header">
            <div id="left_info">
                <ul>
                    <li>

                        <span class="where_we_at">E-mail</span>  <span class="where_we_at_left">welcome@forafreeworld.com</span>
                    </li>
                    <li><span class="where_we_at">Phone</span>  <span class="where_we_at_left">+359 877 36 55 44</span>
                    </li>
                    <li><span class="where_we_at">Address</span>  <span class="where_we_at_left">Sofia, Bulgaria, Reduta 80</span>
                    </li>

                </ul>
            </div>

            <div id="right_info">
                <div id="icons_holder">
                    <ul>
                        <li><img src="img/ps.png" alt=""></li>
                        <li><img src="img/css3.png" alt=""></li>
                        <li><img src="img/wordpress.png" alt=""></li>
                        <li><img src="img/ie.png" alt=""></li>
                        <li><img src="img/mysql.png" alt=""></li>
                        <li><img src="img/javascript.png" alt=""></li>
                        <li><img src="img/php.png" alt=""></li>
                    </ul>
                </div>
            </div>
        </div>
    </header>
    <!--Billboard-->

    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <div id="slogan">
        <h2>WE BELIEVE HAVING A WEBSITE <br/>
            CAN GIVE YOU FREEDOM</h2>

    </div>
    <div id="be_free_button_holder">
        <a href="#Contact"><span id="be_free_button">BE FREE</span></a>
    </div>

    <div id="container_nav_holder">
        <nav id="container_nav">
            <ul>
                <li><a href="#"><img src="img/home.png" alt=""></a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Process</a></li>
                <li><a href="#">Work</a></li>
                <li><a href="#">Contact</a></li>
                <li><a href="#">Blog</a></li>
            </ul>
        </nav>
    </div>
</section>
<section id="section-About">
    <img class="bg animate" src="img/about_us_bg.jpg" anim-detached="true"/>
    <div id="about_us">
        <h2>The Free People</h2>
        <div class="player_holder">
            <div class="players">
                <h3>Nikolay Ivanov</h3>
                <h4>The Designer</h4>
                <img src="img/niko.png" alt="">
                <p>
                    HTML5 <br/>
                    CSS3<br/>
                    Photoshop<br/>
                    Banner Design<br/>
                    Responsive Design<br/>
                </p>
            </div>
            <div class="about_the_players">
                <p>
                    ¡hola! I am Nikolay, the Designer-in-charge for the Be Free Studio Team. I specialize in planning
                    and designing websites from scratch, because this way I can get creative. My skills include HTML5 and
                    CSS3 proficiency, good level of Adobe Photoshop Suite and I create Responsive Designs with accent
                    on excellent user experience. What really fascinates me are the projects where I can add value by
                    inserting custom details and tweaks and be able to work on company branding. I love creating unique
                    sites for unique businesses..
                </p>
            </div>
        </div>
        <div class="player_holder">
            <div class="players">
                <h3>Denislav Dimitrov</h3>
                <h4>The Developer</h4>
                <img src="img/denkata.png" alt="">
                <p>
                    Javascript<br/>
                    jQuery and AJAX<br/>
                    PHP<br/>
                    MySQL<br/>
                    CMS / WordPress<br/>
                </p>
            </div>
            <div class="about_the_players">
                <p>
                    A few words about me: I live in my own organized world where everything has its place and purpose.
                    I like to get 'crazy' with PHP and MySQL, this is what I do for a living and I really enjoy it. My focus
                    is on creating an organized and sustainable backbone for your website by providing user-friendly
                    Content Management, top level information security and an optimized database for your data. I am
                    also responsible for the server-side website management incl. URL redirecting, content caching and
                    data mining protection.
                </p>
            </div>
        </div>
    </div>
</section>
<section id="section-Process">
    <img class="bg animate" src="img/how_we_work_bg.png" anim-detached="true"/>
    <div id="how_we_work">
        <h2>How we work</h2>
        <div class="how_we_work_nav">
            <ul>
                <li><a href="javascript:;">
                        <div class="how_we_work_buttons_holder">
                            <span class="how_we_work_buttons b_active">Starting the project</span>
                        </div>
                    </a></li>
                <li><a href="javascript:;">
                        <div class="how_we_work_buttons_holder">
                            <span class="how_we_work_buttons">Design and coding</span>
                        </div>
                    </a></li>
                <li><a href="javascript:;">
                        <div class="how_we_work_buttons_holder">
                            <span class="how_we_work_buttons">Final product</span>
                        </div>
                    </a></li>
            </ul>
        </div>
        <div id="meeting" class="slides_work">
            <h2>Meeting and Creating</h2>
            <div class="meeting_and_creating_info">
                <div class="img_holder">
                    <img src="img/meet_the_customer.png" alt="">
                </div>
                <p>
                    We meet our customer and try to get to know them, their idea or their business and their goals to the best
                    possible extent. This will prove important for all of us later when we will use this to offer additional
                    value to the project by suggesting process improvements and professional advice related to the website.
                    We believe in human to human connections with our customers, because we realize that eventually we
                    all share the same global purpose in life.
                </p>
            </div>
            <div class="meeting_and_creating_info">
                <div class="img_holder">
                    <img src="img/thinking_and_creating.png" alt="">
                </div>
                <p id="thinking_parg">
                    Before we write even one line of code (and we write lots of lines!), we sit down and discuss the project
                    plan. What is the main purpose of the website? Is it to attract customers or its goal is to intrigue and
                    offer amazing content? Is it there to sell or maybe to raise funds about something? We create the work
                    schedule and clarify unclear points with our patron. This is when we drink a LOT of coffee.
                </p>
            </div>
            <div class="meeting_and_creating_info">
                <div class="img_holder">
                    <img src="img/mockup.png" alt="">
                </div>
                <p id="mockup_text">
                    After there is a plan in place, we start drafting the website for our customer. We do a raw
                    black-and white sketch only first, in order to discuss and agree on the general look and feel of the
                    website early in the project starting phase. In this phase we listen to our client's instructions, but if
                    needed we can come up with our own unique website structure too. This is the end of the Project Start phase.
                </p>
            </div>
        </div>
        <div id="coding_part" class="slides_work">
            <h2>This is where the magic happens</h2>
            <div class="design_and_coding">
                <div class="design_and_coding_info_holder">
                    <div class="desing_and_coding_info">
                        We emphasize on the small, but important details - fonts, color scheme..
                    </div>
                    <div class="desing_and_coding_info lower">
                        Banner/Logo design is big part of the web identity of the company
                    </div>
                    <div class="desing_and_coding_info">
                        Creating SEO friendly, clean front-end code in HTML5 and CSS3
                    </div>
                </div>
                <img src="img/fireworks.jpg" alt="">
            </div>
            <div class="design_and_coding">
                <div class="design_and_coding_info_holder">
                    <div class="desing_and_coding_info lower">
                        A website must include dynamically changing content in order to survive in today's www
                    </div>
                    <div class="desing_and_coding_info">
                        Here comes server-side scripting, databases and Content Management Systems
                    </div>
                    <div class="desing_and_coding_info lower">
                        We combine latest web technologies and innovative thinking to create the optimal website for your needs
                    </div>
                </div>
                <img src="img/brackets.jpg" alt="">
            </div>
        </div>
        <div id="end_work" class="slides_work">
            <h2>What you receive at the end</h2>
            <div id="center_that">
                <div class="end_work_info">
                    Beautiful website with great functionality
                </div>
                <div class="end_work_info">
                    Optimized content ensuring short loading time
                </div>
                <div class="end_work_info">
                    Website that works on all devices and gadgets
                </div>


            </div>
            <div id="end_work_img">
                <img src="img/end_work.png" alt="">
            </div>
        </div>
    </div>
</section>
<section id="section-Work">
    <img class="bg animate" src="img/office2.jpeg" anim-detached="true"/>
    <div id="our_work">
        <h2>Work</h2>
        <div id="slider_work">
            <div class="active">
                <div class="websites">
                    <div class="web_info1">
                        <h3>Academic Boxing Club</h3>
                        <a href="http://www.academicboxingclub.org" target="_blank"><h4>academicboxingclub.org</h4></a>
                        <div class="web_discription">
                            <ul>
                                <li>
                                    <h5>Job Description</h5>
                                    <p>
                                        We created the website of our boxing club. It is made from ground up, including
                                        custom colors, fonts, pictures, banner and logo design and user experience.
                                        This website utilizes MySQL 5.x database for the news and features a small custom
                                        Content Management System. We also provide ongoing website support for this project.
                                    </p>
                                </li>
                                <li>
                                    <h5>Skills utilized</h5>
                                    <ul>
                                        <li>Graphic Design</li>
                                        <li>Photoshop</li>
                                        <li>HTML5</li>
                                        <li>CSS3</li>
                                        <li>JavaScript/jQuery</li>
                                        <li>PHP</li>
                                        <li>MySQL</li>
                                    </ul>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="the_website">
                        <img src="img/box.png" alt="">
                    </div>
                </div>
            </div>

            <div>
                <div class="websites">
                    <div class="web_info">
                        <h3>TeniskaShop</h3>
                        <a href="http://www.teniskashop.eu" target="_blank"><h4>teniskashop.eu</h4></a>
                        <div class="web_discription">
                            <ul>
                                <li>
                                    <h5>Job Description</h5>
                                    <p>
                                        Online shop for uniquely designed art t-shirts. The whole design, site look and
                                        feel and banners/color scheme was designed by hand. Teniskashop.eu also has an
                                        own Content Management System designed and implemented manually by us.
                                        Range of services included hosting and server-side management (cPanel).
                                    </p>
                                </li>
                                <li>
                                    <h5>Skills utilized</h5>
                                    <ul>
                                        <li>Photoshop</li>
                                        <li>HTML5</li>
                                        <li>CSS3</li>
                                        <li>JavaScript/jQuery</li>
                                        <li>AJAX</li>
                                        <li>PHP</li>
                                        <li>Apache 2.0/cPanel</li>
                                    </ul>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="the_website1">
                        <img src="img/teniskashop.png" alt="">
                    </div>
                </div>
            </div>

            <div>
                <div class="websites">
                    <div class="web_info">
                        <h3>Physiotherapeutic Studio "GabieAngie"</h3>
                        <a href="http://www.kineziterapiabg.com" target="_blank"><h4>kineziterapiabg.com</h4></a>
                        <div class="web_discription">
                            <ul>
                                <li>
                                    <h5>Job Description</h5>
                                    <p>
                                        Small one-page interactive website created for one the best physiotherapists in
                                        Bulgaria, Dimitar Stoyanov. We created the whole design concept and user
                                        experience, aiming for a lightweight, easy-to-navigate webpage as an end result.
                                        A small MySQL database was deployed in order to maintain the user reviews.
                                    </p>
                                </li>
                                <li>
                                    <h5>Skills utilized</h5>
                                    <ul>
                                        <li>HTML5</li>
                                        <li>CSS3</li>
                                        <li>JavaScript/jQuery</li>
                                        <li>PHP</li>
                                        <li>MySQL</li>
                                    </ul>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="the_website2">
                        <img src="img/kineziterapiabg.png" alt="">
                    </div>
                </div>
            </div>
        </div>
        <span id="playback"><img src="img/playback_pause.png"/></span>
    </div>
</section>
<section id="section-Contact">
    <div id="contact_us_background">
    <div id="contact_us">
        <h2>Interested in working with us?</h2>
        <div class="contact_us_nav">
            <ul>
                <li><a href="javascript:;">
                        <span id="form_button_one" class="project_form_buttons">Detailed Project Form </span>
                    </a>
                </li><li><a href="javascript:;">
                        <span class="project_form_buttons">Quick Project Form </span>
                    </a>
                <li>
            </ul>
        </div>

        <?php
        //FORM USER ACTION FEEDBACK
        foreach ($message as $v) {
            echo "<div class='message_feedback'>".$v."</div>";
        }
        ?>
        <div id="detailed_form" class="contact_forms">
            <form method="POST" action="http://forafreeworld.com/#Contact">
                <div class="quick_form_holder">
                    <input type="text" name="name_detail" placeholder="Name"
                        <?php
                        if(isset($name) && !$mailed) { echo "value='$name'";}
                        ?>
                        >
                </div>
                <div id="email_and_phone_holder">
                    <div id="email">
                        <input type="text" name="email_detail" placeholder="Email Address"
                            <?php
                            if(isset($email) && !$mailed) { echo "value='$email'";}
                            ?>
                            >
                    </div>
                    <div id="phone">
                        <input type="text" name="phone_detail" placeholder="Telephone"
                            <?php
                            if(isset($phone) && !$mailed) { echo "value='$phone'";}
                            ?>
                            >
                    </div>
                </div>
                <div class="quick_form_holder1">
                    <input type="text" name="company_detail" placeholder="Company"
                        <?php
                        if(isset($company) && !$mailed) { echo "value='$company'";}
                        ?>
                        >
                </div>

                <div id="budget">
                    <h3>Budget</h3>
                    <br />
                    <br />
                    <ul>
                        <li>
                            <div>
                                <input type="radio" id="radio-1-1" name="budget" value="Up to $200" class="regular-radio"
                                    <?php
                                    if(isset($_POST['budget']) && $_POST['budget'] === "Up to $200") {echo " checked"; $budget_checked = true;}
                                    ?>
                                    /><label for="radio-1-1"></label>
                            </div>
                        </li>
                        <li>
                            <div>
                                <input type="radio" id="radio-1-2" name="budget" value="$200 - $500" class="regular-radio"
                                    <?php
                                    if(isset($_POST['budget']) && $_POST['budget'] === "$200 - $500") {echo " checked"; $budget_checked = true;}
                                    ?>
                                    /><label for="radio-1-2"></label>
                            </div>
                        </li>
                        <li>
                            <div>
                                <input type="radio" id="radio-1-3" name="budget" value="$500 - $2000" class="regular-radio"
                                    <?php
                                    if(isset($_POST['budget']) && $_POST['budget'] === "$500 - $2000") {echo " checked"; $budget_checked = true;}
                                    ?>
                                    /><label for="radio-1-3"></label>
                            </div>
                        </li>
                        <li>
                            <div>
                                <input type="radio" id="radio-1-4" name="budget" value="$2000 and up" class="regular-radio"
                                    <?php
                                    if(isset($_POST['budget']) && $_POST['budget'] === "$2000 and up") {echo " checked"; $budget_checked = true;}
                                    ?>
                                    /><label for="radio-1-4"></label>
                            </div>
                        </li>
                        <li>
                            <div>
                                <input type="radio" id="radio-1-5" name="budget" value="Not Sure" class="regular-radio"
                                    <?php
                                    if($budget_checked !== true) {echo " checked";}
                                    ?>
                                    /><label for="radio-1-5"></label>
                            </div>
                        </li>
                    </ul>
                </div>

                <div id="project_type">
                    <h3>Project Type</h3>
                    <br />
                    <br/>
                    <ul>
                        <li>
                            <div>
                                <input type="radio" id="radio-2-1" name="project_type" value="Full Service" class="regular-radio"
                                    <?php
                                    if(isset($_POST['project_type']) && $_POST['project_type'] === "Full Service") {echo " checked"; $project_type_checked = true;}
                                    ?>
                                    /><label for="radio-2-1"></label>
                            </div>
                        </li>
                        <li>
                            <div>
                                <input type="radio" id="radio-2-2" name="project_type" value="Design only" class="regular-radio"
                                    <?php
                                    if(isset($_POST['project_type']) && $_POST['project_type'] === "Design only") {echo " checked"; $project_type_checked = true;}
                                    ?>
                                    /><label for="radio-2-2"></label>
                            </div>
                        </li>
                        <li>
                            <div>
                                <input type="radio" id="radio-2-3" name="project_type" value="Maintenance" class="regular-radio"
                                    <?php
                                    if(isset($_POST['project_type']) && $_POST['project_type'] === "Maintenance") {echo " checked"; $project_type_checked = true;}
                                    ?>
                                    /><label for="radio-2-3"></label>
                            </div>
                        </li>
                        <li>
                            <div>
                                <input type="radio" id="radio-2-4" name="project_type" value="Other" class="regular-radio"
                                    <?php
                                    if($project_type_checked !== true) {echo " checked";}
                                    ?>
                                    /><label for="radio-2-4"></label>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="quick_form_holder2">
                    <textarea name="question_detail" cols="30" rows="1" placeholder="Anything else we need to know"><?php
                        if(isset($question) && $question <> "" && !$mailed) { echo $question;}
                        ?></textarea>
                </div>
                <div id="detailed_form_send">
                    <input type="image" name="submit" src="img/send.png">
                </div>
            </form>
        </div>

        <div id="quick_form_wrapper">
            <div id="quick_form" class="contact_forms">
                <form method="POST" action="#Contact">
                    <div class="quick_form_holder">
                        <input type="text" name="name_short" placeholder="Name"
                            <?php
                            if(isset($name) && !$mailed) { echo "value='$name'";}
                            ?>
                            >
                            
                                         
                    </div>
                    
                    
                    <div class="quick_form_holder">
                        <input type="text" name="email_short" placeholder="Email Address"
                            <?php
                            if(isset($email) && !$mailed) { echo "value='$email'";}
                            ?>
                            >
                    </div>
                    <div class="quick_form_holder1">
                        <textarea name="question_short" cols="30" rows="1" placeholder="What do you have in mind"><?php
                            if(isset($question) && $question <> "" && !$mailed) { echo $question;}
                            ?></textarea>
                    </div>
                    <div id="quick_form_send">
                        <input type="hidden" name="short_form_check" value="show_short_form">
                        <input type="image" name="submit" src="img/send.png">
                    </div>
                    
                      <!--[if lt IE 10]>
                <script src="js/placeholder.js"></script>
                <![endif]-->  
                </form>
            </div>
        </div>
    </div>
    <!-- WEB FOOTER -->
    <footer id="container_footer">
        <a href="#Home">
            <div id="footer_arrow">
                <img src="img/footer_arrow.png" alt="">
            </div>
        </a>
    </footer>
    </div>
</section>
</div>
</body>
</html>